<template>
  <view>
    <u-navbar height="50" title="拼团详情" title-size="36" title-color="#333"></u-navbar>
    <view class="headView">
      <view v-if="groupInfo.status == 0" class="headTitle">拼团中</view>
      <view v-else-if="groupInfo.status == 1" class="headTitle">拼团成功</view>
      <view v-else-if="groupInfo.status == 2" class="headTitle">拼团失效</view>
    </view>
    <view class="contentView">
      <view class="numberView">
        <view class="numberTitle" v-if="groupInfo.userSize - groupInfo.userCount > 0"
          >{{ groupInfo.userSize }}人成团，还差{{
            groupInfo.userSize - groupInfo.userCount
          }}人组团成功</view
        >
        <view class="numberTitle" velse>{{ groupInfo.userSize }}人团，成功</view>
        <view class="downView" v-if="countdown(groupInfo.expireTime) > 0">
          <view class="line"></view>
          <view class="downTitle">剩余</view>
          <u-count-down
            :timestamp="countdown(groupInfo.expireTime)"
            format="HH:mm:ss"
            color="#fff"
            bg-color="#FF4242"
            font-size="26"
          >
          </u-count-down>
          <view class="downTitle">结束</view>
          <view class="line"></view>
        </view>
        <view class="userView">
          <view class="userInfo">
            <view class="userItem">
              <u-avatar :src="groupInfo.avatar" size="100"></u-avatar>
              <view class="usetType">拼主</view>
            </view>
            <view class="username">{{ groupInfo.nickname }}</view>
          </view>
          <view class="userInfo" v-for="(item, index) in groupUsers" :key="index">
            <view class="userItem">
              <u-avatar :src="item.avatar" size="100"></u-avatar>
            </view>
            <view class="username">{{ item.nickname }}</view>
          </view>
          <view class="userInfo" v-for="(user, i) in emptyUser" :key="i">
            <view class="userItem">
              <u-avatar src="/static/wz.png" size="100"></u-avatar>
            </view>
            <view class="username"></view>
          </view>
        </view>
        <!-- #ifdef MP -->
        <button v-if="groupInfo.status == 0" open-type="share" class="shareBtn" @click="show = true"
          >立即邀请好友</button
        >
        <view v-else class="" style="height: 20rpx"></view>
        <!-- #endif -->

        <!-- #ifdef APP || H5 -->
        <button v-if="groupInfo.status == 0" class="shareBtn" @click="share">立即邀请好友</button>
        <view v-else class="" style="height: 20rpx"></view>
        <!-- #endif -->
      </view>
      <view class="locationView">
        <view class="addressView">
          <u-icon size="36" name="/static/dw-g.png"></u-icon>
          <view class="location">
            <view class="storeName">
              <!-- 收货人&nbsp;{{goodsInfo.receiverName}}&nbsp;{{goodsInfo.receiverMobile}} -->
              收货人 {{ goodsInfo.receiverName }} {{ goodsInfo.receiverMobile }}
            </view>
            <view class="address">{{ goodsInfo.receiverDetailAddress }}</view>
            <!-- <view class="address">{{goodsInfo.receiverDetailAddress}}</view> -->
          </view>
        </view>
      </view>
      <view class="infoView">
        <!-- <view class="infoTitle">3人拼团成功，预计10月01日-10月12日可自提取货</view> -->
        <!-- v-for="item in joinGroupInfo.products" :key="'a'+item.id" -->
        <view class="goodsView" v-for="item in goodsInfo.items" :key="item.id">
          <u-image
            class=""
            :name="item.picUrl"
            width="220rpx"
            height="220rpx"
            border-radius="10"
          ></u-image>
          <view class="orde-riget">
            <view class="goods-title">
              {{ item.spuName }}
            </view>
            <view class="goods-speci">
              <text v-for="(spu, i) in item.properties" :key="i" style="margin-right: 10rpx">{{
                spu.valueName
              }}</text>
            </view>
            <view class="dis-flex flex-y-center flex-y-between" style="margin-top: 10px">
              <view class="goods-price"
                >拼团价¥ <text class="bold">{{ (item.payPrice * 0.01).toFixed(2) }}</text></view
              >
              <text class="goods-num">x{{ item.count }}</text>
            </view>
          </view>
        </view>
        <view class="count" style="padding: 0 20rpx" v-if="goodsInfo">
          <view class="totalView">
            <view class="totalTitle">商品总价</view>
            <view class="totalPrice">¥{{ (goodsInfo.totalPrice * 0.01).toFixed(2) }}</view>
          </view>
          <u-line></u-line>
          <view class="totalView">
            <view class="totalTitle">拼团价</view>
            <view class="totalPrice totalPrice2"
              >¥{{ (goodsInfo.payPrice * 0.01).toFixed(2) }}</view
            >
          </view>
          <u-line></u-line>
          <view class="totalView">
            <view class="totalTitle">配送费</view>
            <view class="totalPrice">¥{{ (goodsInfo.deliveryPrice * 0.01).toFixed(2) }}</view>
          </view>
          <u-line></u-line>
          <view class="totalView totalPrice3" style="justify-content: flex-end">
            共{{ goodsInfo.items.length }}样商品 实付：¥{{ (goodsInfo.payPrice * 0.01).toFixed(2) }}
          </view>
        </view>
      </view>

      <view class="contentBox">
        <view class="orderTitle">订单信息</view>
        <view class="orderText"
          >交易单号：<text>{{ goodsInfo.no }}</text></view
        >
        <view class="orderText"
          >下单时间：<text>{{
            $u.timeFormat(goodsInfo.createTime, 'yyyy年mm月dd日 hh时MM分')
          }}</text></view
        >
        <view class="orderText"
          >订单备注：<text>{{ goodsInfo.userRemark ? goodsInfo.userRemark : '无' }}</text></view
        >
        <view class="orderText"
          >支付时间：<text>{{
            $u.timeFormat(goodsInfo.payTime, 'yyyy年mm月dd日 hh时MM分')
          }}</text></view
        >
      </view>
      <u-gap height="20"></u-gap>
    </view>
    <u-popup v-model="show" height="420" border-radius="15" mode="bottom">
      <view class="">
        <view class="" style="font-size: 30rpx; text-align: center; padding: 50rpx">
          还差一人，去邀请你好友吧
        </view>
        <view class="" style="height: 150rpx"> </view>
        <u-gap height="20" bg-color="#F0F1F2" />
        <view class="" style="font-size: 30rpx; text-align: center; padding: 50rpx"> 取消 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 1,
      show: false,
      timeData: {},
      group_goods_id: '',
      group_id: '',
      orderId: '',
      groupInfo: '',
      groupUsers: [{}, {}],
      goodsInfo: {
        items: [{}, {}]
      },
      emptyUser: []
    }
  },
  onLoad(options) {
    this.group_id = options.id
    this.orderId = options.orderId
    this.init()
  },

  computed: {
    countdown: function () {
      return (item) => {
        let now = new Date().getTime()
        if (item > now) {
          let difference = item - now
          return difference / 1000
        } else return 0
      }
    }
  },

  onShareAppMessage(OBJECT) {
    return {
      title: '参加拼团',
      imageUrl: this.goodsInfo.items[0].picUrl,
      path: `goods/group-goods-join/group-goods-join?id=${this.group_id}&orderId=${this.orderId}`
    }
  },
  methods: {
    init() {
      this.$u
        .get('/app-api/promotion/combination-record/get-detail', { id: this.group_id })
        .then((res) => {
          this.groupInfo = res.data.headRecord
          this.groupUsers = res.data.memberRecords
          for (let i = 0; i < this.groupInfo.userSize - this.groupInfo.userCount; i++) {
            this.emptyUser.push({
              index: i
            })
          }
        })

      this.$u.get('/app-api/trade/order/get-detail', { id: this.orderId }).then((res) => {
        this.goodsInfo = res.data
      })
    },
    onChange(e) {
      this.timeData = e
    }
  }
}
</script>

<style>
@import url('group-order-details.css');

page {
  background: #f2f2f2;
}
</style>
